/* overriding the story iframe showcase styles to accommodate Touch devices */

html {
  background: transparent !important;
}

.sb-show-main {
  padding: 2rem;
  min-height: 100vh;

  @media (pointer: coarse) and (hover: none) {
    padding: 1rem;
  }
}

// Lazy Load
// We don't use design tokens or SLDS classes for styling here to prevent false
// failed tests for unrelated changes, this styling is cosmetic for Storybook only
.lazyload-placeholder {
  background-color: #f2f2f2;
  margin: 1.25rem 0;
}

// Styling Hooks Table
.slds-table.hooks-table {
  color: #16325c;

  th {
    background-color: #f3f2f2;
  }

  td {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    white-space: normal;
  }

  .hooks-table__section {
    td {
      padding-top: 0.75rem;
    }

    &_end td {
      padding-bottom: 0.75rem;
    }

    &:not(:first-child) {
      border-top: 2px solid #dedbda;
    }
  }

  .hooks-table__col-category {
    vertical-align: top;
    font-weight: bold;
  }
}
